<template>
    <view class="p-relative" :style="{ minHeight: minHeight || minHeight == 0 ? minHeight : headerArea.title_height + headerArea.menuTop + 'px' }" style="max-width: 1024px">
        <!-- 最底背景层 -->
        <view v-if="usebg" class="background-layer" :style="'background:' + bgLayer + ';' + bgLayerCustomStyle"></view>
        <!-- 顶部导航栏 -->
        <view class="navbar-box" id="navbar">
            <view class="navbar main" style="direction: rtl" :style="{ background: navbarBg, customStyle, height: headerArea.title_height + 'px', paddingTop: headerArea.menuTop + 'px' }">
                <!-- 自定义 -->
                <slot name="content" v-if="customContent"></slot>
                <!-- 默认 -->
                <block v-else>
                    <view class="navbar-right" :class="textShadow ? 'text-shadow' : ''">
                        <!-- 右侧插槽内容 -->
                        <slot name="right"></slot>
                    </view>
                    <view class="navbar-title" :style="{ color: titleColor }" :class="[textShadow ? 'text-shadow' : '', 'dir-' + $tools.strDir(title)]">
                        <!-- 标题插槽内容 -->
                        <slot name="title"></slot>
                        {{ title }}
                    </view>
                    <view class="navbar-left" :class="textShadow ? 'text-shadow' : ''">
                        <!-- 左侧插槽内容 -->
                        <slot name="left"></slot>
                        <!-- 返回、返回首页 -->
                        <view class="left" v-if="back">
                            <template v-if="doubleBack">
                                <back-home />
                            </template>
                            <view v-else @click="handleBack">
                                <u-icon v-if="navBack" name="arrow-leftward" size="22" :color="backColor" bold></u-icon>
                                <u-icon v-else name="home" size="26" :color="backColor"></u-icon>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        // 是否显示返回图标（默认显示）
        back: {
            type: Boolean,
            default: true,
        },
        // 返回图标颜色
        backColor: {
            type: String,
            default: '#4A4A4A',
        },
        // 标题
        title: {
            type: String,
            default: '',
        },
        // 标题颜色
        titleColor: {
            type: String,
            default: '#000',
        },
        // 最底背景层 、（默认首页的颜色）
        bgLayer: {
            type: String,
            default: 'linear-gradient(#7889ff, #fff)',
        },
        usebg:{
            type: Boolean,
            default: false,
        },
        // 最底背景层自定义样式
        bgLayerCustomStyle: {
            type: String,
            default: '',
        },
        // 自定义样式
        customStyle: {
            type: String,
            default: '',
        },
        // 导航栏背景（默认首页的颜色）
        navbarBg: {
            type: String,
            default: 'linear-gradient(#c4ccff, #ffffff)',
        },
        // 全部自定义内容的样式
        customContent: {
            type: Boolean,
            default: false,
        },
        textShadow: {
            type: Boolean,
            default: false,
        },
        doubleBack: {
            type: Boolean,
            default: false,
        },
        minHeight: {
            type: Number,
            default: null,
        },
    },
    data() {
        return {
            navBack: false,
        }
    },
    computed: {
        headerArea() {
            let area = uni.getSystemInfoSync()
            // #ifdef MP-WEIXIN
            let menu = uni.getMenuButtonBoundingClientRect()


            return {
                status_height: area.statusBarHeight,
                title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
                menuLeft: menu.left,
                menuTop: menu.top - (menu.top - area.statusBarHeight),
            }
            // #endif
            // #ifndef MP-WEIXIN
            return {
                status_height: area.statusBarHeight,
                title_height: uni.upx2px(82),
                menuLeft: 0,
                menuTop: uni.upx2px(88),
            }
            // #endif
        },
    },
    onShow() {
        // #ifdef  MP-WEIXIN
        uni.showShareMenu({
            withShareTicket: true,
        })
        // #endif
    },

    created() {
        let pages = getCurrentPages()
        this.navBack = pages[pages.length - 2] ? true : false
    },

    methods: {
        handleBack() {
            let pages = getCurrentPages()
            if (pages.length > 1) {
                // 如果有上一页，就返回上一页
                uni.navigateBack({
                    delta: 1,
                })
            } else {
                //没有上一页，就返回首页
                uni.switchTab({
                    url: '/pages/index/index',
                })
            }
        },
    },
}
</script>
<style scoped lang="scss">
.background-layer {
    position: fixed;
    top: 0;
    left: auto;
    width: 100%;
    height: 33vh;
    background-image: linear-gradient(#fffdde, #fff);
    z-index: 1; /* 将背景放在内容上面 */
    max-width: 1024px;
    margin: 0 auto;
}
.navbar-box {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 3;
    max-width: 1024px;
    margin: 0 auto;
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    position: relative;
    padding-top: var(--status-bar-height);
    z-index: 99999 !important;
}

.navbar-title {
    width: 40%;
    text-align: center;
    position: absolute;
    left: 30%;
    right: 30%;
    font-size: 34rpx;
}

.text-shadow {
    text-shadow: 0rpx 0rpx 2rpx rgb(0, 0, 0);
}

.navbar-left {
    display: flex;
    align-items: center;
    height: 100%;
}
.navbar-right {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right:27% ;
}
</style>